import React, { useState } from "react";
import PropTypes from "prop-types";
import StyledPopover, { Content, Triangle, Target } from "./style";

function Popover({
  children,
  content,
  offset = {},
  onVisable,
  onHide,
  ...rest
}) {
  const [visable, setVisable] = useState(false);

  const handleClick = () => {
    if (visable) {
      setVisable(false);
      onHide && onHide();
    } else {
      setVisable(true);
      onVisable && onVisable();
    }
  };

  return (
    <StyledPopover onClick={handleClick} {...rest}>
      {visable && (
        <>
          <Content offset={offset}>{content}</Content>
          <Triangle offset={offset} />
        </>
      )}
      <Target>{children}</Target>
    </StyledPopover>
  );
}

Popover.propTypes = {
  children: PropTypes.any,
  content: PropTypes.any,
  offset: PropTypes.shape({ x: PropTypes.string, y: PropTypes.string }),
  onVisable: PropTypes.func,
  onHide: PropTypes.func,
};

export default Popover;
